import QtQuick 2.0
import QtQuick.Controls 2.5
 
Item {
    width: 300
    height: 200
    property var color
    property var radius: "0,0,0,0" // 四个角的圆角半径
    color: "transparent" // 移除默认背景色
    Canvas {
        id: rectCanvas
        anchors.fill: parent
        onPaint: {
            var radii = radius.split(",")
            var leftTop = parseFloat(radii[0])
            var rightTop = parseFloat(radii[1])
            var leftBottom = parseFloat(radii[2])
            var rightBottom = parseFloat(radii[3])
           
            var ctx = getContext("2d");
            ctx.reset(); // 重置画布，清除之前的绘制
            ctx.beginPath(); // 开始一个新的路径
            //ctx.fillColor = color // 设置填充颜色
            // 绘制矩形，其中一个角是圆角
          // 从起点：左上角的水平偏移开始
            ctx.moveTo(x + leftTop, y);

            // 上边，从左上角到右上角
            ctx.lineTo(x + width - rightTop, y);
            ctx.arcTo(x + width, y, x + width, y + rightTop, rightTop);

            // 右边，从右上角到右下角
            ctx.lineTo(x + width, y + height - rightBottom);
            ctx.arcTo(x + width, y + height, x + width - rightBottom, y + height, rightBottom);

            // 下边，从右下角到左下角
            ctx.lineTo(x + leftBottom, y + height);
            ctx.arcTo(x, y + height, x, y + height - leftBottom, leftBottom);

            // 左边，从左下角到左上角
            ctx.lineTo(x, y + leftTop);
            ctx.arcTo(x, y, x + leftTop, y, leftTop);
            ctx.fillStyle = color ; // 设置填充颜色
            ctx.fill(); // 填充路径
        }
    }
    // Trigger paint when the color property changes
    onColorChanged: rectCanvas.requestPaint()
    Component.onCompleted: {
        console.log("WQRectangle Component.onCompleted,radius,x,y,width,height",radius,x,y,width,height)
    }
}